<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css.css" type="text/css">
               
    </head>
    <body id="fond">
 
        <div id="contenair" > 
            <div id="header">
                <div id="logo"></div>
                <div id="formbody">
                    <form method="post">
                        <input name="ident" id="ident" size="10" placeholder="identifiant">
                        <input type="password" name="pass" id="pass" size="10" placeholder="mot de passe">
                    </form>
                </div>
                <img id="fleche" src="image/flecheconnexion.png">
                <div id="panier"><a href="panier.html"><img id="caddie"  src="image/caddie.png">Mon panier</a>
                    <div id="traitp"><img  src="image/traitpanier.png"></div>
                    <div id="rec1"></div>
                    <div id="rec2"></div>
                    <img id="flechep" src="image/flechepanier.png">
                </div>
            </div>
            <div id="nav"> 
                <ul>
               <li><a id="poissonerie" href="">Poissonerie</a></li>
               <li><a id="surgeles" href=""> Surgelés</a></li>
               <li><a id="boucherie" href="">Boucherie<br>Charcuterie</a></li>
               <li><a id="cremerie" href="">Cremerie</a></li>
               <li><a id="boulangerie" href="">Boulangerie</a></li>
               <li><a id="epiceriesucre" href="">Epicerie<br>Sucre</a></li>
               <li><a id="epiceriesale" href="">Epicerie<br>Sale</a></li>
               <li><a id="legumes" href="">Legumes<br>Fruits</a></li>
               <li><a id="conserve" href="">Conserves</a></li>
               <li><a id="boisson" href="">Boissons</a></li>
               <li><a id="beaute" href="">Soins<br>Beaute</a></li>
               <li><a id="entretien" href="">Entretien</a></li>
                </ul>
    
            
            </div>
            
            <div id='filtres_recherche'>
               
                <a href=''><div class="filtre"><span>Légumes</span></div></a>
                <a href=""><div class="filtre"><span>Produits de la mer</span></div></a>
                <a href=""><div class="filtre"><span>Viandes</span></div></a>
                 <div id="formbody2">
               <form method="post">
                <input name="rech" id="rech" placeholder="Rechercher">    
               </form>
              </div>
                
                <div class="boutons_nav">
                     <a href=""><img src="image/fleche_gauche.png" alt=""></a>                
                     <span><a href="">1</a> </span>
                   <span><a href="">2</a>  </span>
                  <span><a href="">3</a> </span>
                <a href=""> <img src="image/fleche_droite.png" alt=""> </a>        
                </div>
                
                <div id='option_tri'>
                    <form>
                        <select>
                            <option>Croissant</option>
                            <option>Décroissant</option>
                        </select>
                            
                    </form>
                </div>             
            </div>
            <div id='listingContent'>                 
                <div class='produit'>
                    <a href='fiche_produit.html'> <h2>Frites</h2> 
                     <img class='img_produit' src='image/frites.png' alt="">
                     <p>McKain 1,5Kg</p>    
                    </a>
                    <div class='bloc_ajout'>
                    <a href=""><img class='bouton_favori' src='image/bouton_ajout_liste.png' alt=""></a>
                    <a href=""><img class='bouton_panier' src='image/bouton_ajout_panier.png' alt=""></a>
                    </div>
                    <div class='prix'><p>1,87€</p></div>
                </div>
                <div class='produit'><a href='fiche_produit.html'> <h2>Frites</h2> 
                     <img class='img_produit' src='image/frites.png' alt="">
                     <p>McKain 1,5Kg</p>    
                    </a>
                    <div class='bloc_ajout'>
                    <a href=""><img class='bouton_favori' src='image/bouton_ajout_liste.png' alt=""></a>
                    <a href=""><img class='bouton_panier' src='image/bouton_ajout_panier.png' alt=""></a>
                    </div>
                    <div class='prix'><p>1,87€</p></div></div>
                <div class='produit'><a href='fiche_produit.html'> <h2>Frites</h2> 
                     <img class='img_produit' src='image/frites.png' alt="">
                     <p>McKain 1,5Kg</p>    
                    </a>
                    <div class='bloc_ajout'>
                    <a href=""><img class='bouton_favori' src='image/bouton_ajout_liste.png' alt=""></a>
                    <a href=""><img class='bouton_panier' src='image/bouton_ajout_panier.png' alt=""></a>
                    </div>
                    <div class='prix'><p>1,87€</p></div></div>
                <div class='produit'><a href='fiche_produit.html'> <h2>Frites</h2> 
                     <img class='img_produit' src='image/frites.png' alt="">
                     <p>McKain 1,5Kg</p>    
                    </a>
                    <div class='bloc_ajout'>
                    <a href=""><img class='bouton_favori' src='image/bouton_ajout_liste.png' alt=""></a>
                    <a href=""><img class='bouton_panier' src='image/bouton_ajout_panier.png' alt=""></a>
                    </div>
                    <div class='prix'><p>1,87€</p></div></div>
                <div class='produit'><a href='fiche_produit.html'> <h2>Frites</h2> 
                     <img class='img_produit' src='image/frites.png' alt="">
                     <p>McKain 1,5Kg</p>    
                    </a>
                    <div class='bloc_ajout'>
                    <a href=""><img class='bouton_favori' src='image/bouton_ajout_liste.png' alt=""></a>
                    <a href=""><img class='bouton_panier' src='image/bouton_ajout_panier.png' alt=""></a>
                    </div>
                    <div class='prix'><p>1,87€</p></div></div>
                <div class='produit'><a href='fiche_produit.html'> <h2>Frites</h2> 
                     <img class='img_produit' src='image/frites.png' alt="">
                     <p>McKain 1,5Kg</p>    
                    </a>
                    <div class='bloc_ajout'>
                    <a href=""><img class='bouton_favori' src='image/bouton_ajout_liste.png' alt=""></a>
                    <a href=""><img class='bouton_panier' src='image/bouton_ajout_panier.png' alt=""></a>
                    </div>
                    <div class='prix'><p>1,87€</p></div></div>
                <div class='produit'><a href='fiche_produit.html'> <h2>Frites</h2> 
                     <img class='img_produit' src='image/frites.png' alt="">
                     <p>McKain 1,5Kg</p>    
                    </a>
                    <div class='bloc_ajout'>
                    <a href=""><img class='bouton_favori' src='image/bouton_ajout_liste.png' alt=""></a>
                    <a href=""><img class='bouton_panier' src='image/bouton_ajout_panier.png' alt=""></a>
                    </div>
                    <div class='prix'><p>1,87€</p></div></div>
                <div class='produit'><a href='fiche_produit.html'> <h2>Frites</h2> 
                     <img class='img_produit' src='image/frites.png' alt="">
                     <p>McKain 1,5Kg</p>    
                    </a>
                    <div class='bloc_ajout'>
                    <a href=""><img class='bouton_favori' src='image/bouton_ajout_liste.png' alt=""></a>
                    <a href=""><img class='bouton_panier' src='image/bouton_ajout_panier.png' alt=""></a>
                    </div>
                    <div class='prix'><p>1,87€</p></div></div>     
                
                  <div class="boutons_nav">
                     <a href=""><img src="image/fleche_gauche.png" alt=""></a>                
                     <span><a href="">1</a> </span>
                   <span><a href="">2</a>  </span>
                  <span><a href="">3</a> </span>
                <a href=""> <img src="image/fleche_droite.png" alt=""> </a>        
                </div>
            
            
            
        </div>
        
        <footer>
        <a id="footer" href="">Mentions Légales &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Plan de Site</a>
        </footer>
     </body>
     
            
</html>            